<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>
			左侧导航栏
		</title>
		<style>
			.modal { display: none; /* 隐藏弹窗 */ position: fixed; /* 固定位置 */ z-index:
			1; /* 在最上层 */ left: 0; top: 0; width: 100%; /* 全屏 */ height: 100%; /* 全屏
			*/ overflow: auto; /* 如果需要，添加滚动条 */ background-color: rgb(0,0,0); /* 背景颜色
			*/ background-color: rgba(0,0,0,0.4); /* 背景透明度 */ } .modal-content { background-color:
			#fefefe; margin: 15% auto; /* 15% 从顶部，居中 */ padding: 20px; border: 1px
			solid #888; width: 50%; /* 宽度 */ } .close { color: #aaa; float: right;
			font-size: 28px; font-weight: bold; } .close:hover, .close:focus { color:
			black; text-decoration: none; cursor: pointer; } .nav { display: flex;
			align-items: center; padding: 8px 16px; background-color: #fff; border-bottom:
			1px solid #eee; } .nav-left { display: flex; align-items: center; gap:
			16px; flex: 1; } .nav-right { display: flex; align-items: center; gap:
			16px; } .pending-order { display: flex; align-items: center; gap: 4px;
			color: #333; text-decoration: none; } .blue-dot { width: 6px; height: 6px;
			background-color: #1677ff; border-radius: 50%; } .nav-link { color: #666;
			text-decoration: none; font-size: 14px; } .nav-link:hover { color: #1677ff;
			} .free-test { color: #ff4d4f; text-decoration: none; font-size: 14px;
			} .free-test:hover { color: #ff7875; } .member-tag { color: #ff9f00; font-size:
			14px; } .recharge-btn { background-color: #1677ff; color: white; padding:
			4px 12px; border-radius: 4px; text-decoration: none; font-size: 14px; }
			.user-avatar { width: 24px; height: 24px; border-radius: 50%; background-color:
			#eee; display: flex; align-items: center; justify-content: center; } .user-id
			{ color: #666; font-size: 14px; text-decoration: none; } .sidebar { width:
			240px; background-color: #fff; height: 100vh; border-right: 1px solid #eee;
			flex-shrink: 0; font-size: 18px; } .nav-list { list-style: none; padding:
			0; margin: 0; } .nav-item { margin: 4px 0; } .nav-link { display: flex;
			align-items: center; padding: 12px 16px; text-decoration: none; color:
			#333; font-size: 18px; } .icon { margin-right: 8px; } .arrow { margin-left:
			auto; font-size: 16px; } .sub-menu { list-style: none; padding: 0; margin:
			0; display: none; background-color: #f5f5f5; } .sub-menu.active { display:
			block; } .sub-menu li a { padding: 10px 16px 10px 40px; display: block;
			text-decoration: none; color: #666; font-size: 18px; } .nav-link:hover,
			.sub-menu li a:hover { background-color: #f0f0f0; } /* 布局样式 */ .layout
			{ display: flex; height: 100vh; overflow: hidden; } .sidebar { width: 240px;
			background-color: #fff; border-right: 1px solid #eee; position: fixed;
			left: 0; top: 0; bottom: 0; overflow-y: auto; z-index: 1000; } .page-content
			{ flex: 1; margin-left: 240px; min-height: 100vh; position: relative; overflow-x:
			hidden; } /* 视频合成页面的内容区域 */ .container { padding: 20px; min-height: 100vh;
			box-sizing: border-box; } /* 素材库布局 */ .material-container { display: flex;
			gap: 20px; min-height: calc(100vh - 150px); box-sizing: border-box; } /*
			右侧内容区域 */ .main-content-index { flex: 1; height: 100vh; overflow: hidden;
			padding: 0; margin-left: 240px; } /* 视频网格样式 */ .video-grid { display: grid;
			grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px;
			padding: 0 20px 20px 0; } /* 左侧素材边栏样式 */ .material-sidebar { width: 260px;
			background: #f5f5f5; padding: 20px; border-radius: 8px; height: fit-content;
			position: sticky; top: 0; margin-left: -240px; } /* 全局字体大小设置 */ body {
			font-size: 30px; } /* 标题字体大小 */ .title { font-size: 40px; } /* 按钮文字大小 */
			.button { font-size: 25px; } /* 表格文字大小 */ table { font-size: 25px; } /*
			输入框文字大小 */ input, select, textarea { font-size: 25px; } /* 链接文字大小 */ a
			{ font-size: 23px; }
		</style>
		<script src="qrc:///qtwebchannel/qwebchannel.js"></script>
	</head>
	<body>
		<div class="layout">
			<!-- 左侧导航栏 -->
			<nav class="sidebar">
				<ul class="nav-list">
					<li class="nav-item">
						<a href="#" class="nav-link">
							<span class="icon">
								📹
							</span>
							视频创作
							<span class="arrow">
								▶
							</span>
						</a>
						<ul class="sub-menu">
							<li>
								<a href="pages/video-synthesis/video-synthesis.html" target="iframe">
									视频合成
								</a>
							</li>
							<li>
								<a href="pages/script-management/script-management.html" target="iframe">
									脚本管理
								</a>
							</li>
							<li>
								<a href="pages/batch-audio-subtitle/batch-audio-subtitle.html" target="iframe">
									批量配音、字幕
								</a>
							</li>
						</ul>
					</li>
					<li class="nav-item">
						<a href="#" class="nav-link">
							<span class="icon">
								☁️
							</span>
							AI剪辑
							<span class="arrow">
								▶
							</span>
						</a>
						<ul class="sub-menu">
							<li>
								<a href="pages/ai-film/ai-film.html" target="iframe">
									AI成片
								</a>
							</li>
							<!-- <li><a href="#">选项2</a></li> -->
						</ul>
					</li>
					<li class="nav-item">
						<a href="#" class="nav-link">
							<span class="icon">
								☁️
							</span>
							AI应用
							<span class="arrow">
								▶
							</span>
						</a>
						<ul class="sub-menu">
							<li>
								<a href="pages/ai-chat/ai-chat.html" target="iframe">
									AI对话
								</a>
							</li>
							<!-- <li><a href="#">选项2</a></li> -->
						</ul>
					</li>
					<li class="nav-item">
						<a href="pages/hot-topics/hot-topics.html" target="iframe" class="nav-link">
							<span class="icon">
								🔥
							</span>
							热点选题榜
						</a>
					</li>
					<li class="nav-item">
						<a href="#" class="nav-link">
							<span class="icon">
								☁️
							</span>
							文案创作
							<span class="arrow">
								▶
							</span>
						</a>
						<ul class="sub-menu">
							<li>
								<a href="pages/title-generator/title-generator.html" target="iframe">
									标题生成
								</a>
							</li>
							<li>
								<a href="pages/content-generator/content-generator.html" target="iframe">
									文案生成
								</a>
							</li>
							<li>
								<a href="pages/content-rewrite/content-rewrite.html" target="iframe">
									文案重写
								</a>
							</li>
							<!-- <li><a href="#">选项2</a></li> -->
						</ul>
					</li>
					<li class="nav-item">
						<a href="#" class="nav-link">
							<span class="icon">
								☁️
							</span>
							文案提取
							<span class="arrow">
								▶
							</span>
						</a>
						<ul class="sub-menu">
							<li>
								<a href="pages/batch-extract/batch-extract.html" target="iframe">
									音/视频批量提取
								</a>
							</li>
						</ul>
					</li>
					<li class="nav-item">
						<a href="#" class="nav-link">
							<span class="icon">
								☁️
							</span>
							素材预处理
							<span class="arrow">
								▶
							</span>
						</a>
						<ul class="sub-menu">
							<li>
								<a href="pages/video-deduplication/video-deduplication.html" target="iframe">
									视频去重
								</a>
							</li>
							<li>
								<a href="pages/smart-framing/smart-framing.html" target="iframe">
									智能分镜
								</a>
							</li>
							<li>
								<a href="pages/audio-video-separation/audio-video-separation.html" target="iframe">
									音视频分离
								</a>
							</li>
							<li>
								<a href="pages/video-cropping/video-cropping.html" target="iframe">
									视频剪裁
								</a>
							</li>
							<li>
								<a href="pages/audio-track-merge/audio-track-merge.html" target="iframe">
									音轨合并
								</a>
							</li>
							<li>
								<a href="pages/remove-subtitles/remove-subtitles.html" target="iframe">
									去除字幕
								</a>
							</li>
						</ul>
					</li>
					<li class="nav-item">
						<a href="#" class="nav-link">
							<span class="icon">
								☁️
							</span>
							运营
							<span class="arrow">
								▶
							</span>
						</a>
						<ul class="sub-menu">
							<li>
								<a href="pages/forbidden-word-review/forbidden-word-review.html" target="iframe">
									违禁词审核
								</a>
							</li>
						</ul>
					</li>
					<li class="nav-item">
						<a href="pages/distribution-promotion/distribution-promotion.html" target="iframe"
						class="nav-link">
							分销推广
						</a>
					</li>
					<li class="nav-item">
						<a href="pages/import-font/import-font.html" target="iframe" class="nav-link">
							全局设置
						</a>
					</li>
					<li class="nav-item">
						<a href="#" class="nav-link">
							<span class="icon">
								☁️
							</span>
							帮助
							<span class="arrow">
								▶
							</span>
						</a>
						<ul class="sub-menu">
							<li>
								<a href="" target="iframe">
									视频教程
								</a>
							</li>
							<li>
								<a href="" target="iframe">
									产品说明
								</a>
							</li>
							<li>
								<a href="" target="iframe">
									问题反馈
								</a>
							</li>
							<li>
								<a href="#" id="about-link" class="nav-link">
									关于
								</a>
							</li>
							<li>
								<a href="#" id="update-link" class="nav-link">
									检查更新
								</a>
							</li>
						</ul>
					</li>
					<!-- 更多菜单项... -->
				</ul>
			</nav>
			<!-- 右侧内容区域 -->
			<main class="main-content-index" id="mainContent">
				<!-- 顶部个人信息 -->
				<nav class="nav">
					<div class="nav-left">
						<a href="#" class="pending-order">
							<span class="blue-dot">
							</span>
							待支付订单
						</a>
						<a href="#" class="nav-link">
							即将过期优惠券
						</a>
						<a href="#" class="nav-link">
							新手入门
						</a>
						<a href="#" class="free-test">
							免费试刷测试
						</a>
					</div>
					<div class="nav-right">
						<span class="member-tag">
							体验会员(长期)
						</span>
						<a href="#" class="recharge-btn">
							会员充值
						</a>
						<a href="#" class="user-id">
							用户543762
						</a>
					</div>
				</nav>
				<!-- 这里是默认内容 -->
				<iframe name="iframe" src="pages/video-synthesis/video-synthesis.html"
				style="width: 100%;height: calc(100vh - 20px);border: none;" frameborder="0">
				</iframe>
			</main>
		</div>
		<div id="about-modal" class="modal" style="display: none;z-index: 999999;margin-left: 180px;">
			<div class="modal-content">
				<span class="close" id="close-about">
					&times;
				</span>
				<h2>
					关于
				</h2>
				<p>
					这是关于弹窗的内容...
				</p>
			</div>
		</div>
		<div id="update-modal" class="modal" style="display: none;z-index: 999999;margin-left: 180px;">
			<div class="modal-content">
				<span class="close" id="close-update">
					&times;
				</span>
				<h2>
					检查更新
				</h2>
				<p>
					这是检查更新弹窗的内容...
				</p>
			</div>
		</div>
		<script>
			document.querySelectorAll('.nav-link').forEach(link => {
				link.addEventListener('click', (e) => {
					const subMenu = link.nextElementSibling;
					if (subMenu && subMenu.classList.contains('sub-menu')) {
						e.preventDefault();
						subMenu.classList.toggle('active');
						const arrow = link.querySelector('.arrow');
						if (arrow) {
							arrow.textContent = subMenu.classList.contains('active') ? '▼': '▶';
						}
					}
				});
			});

			document.addEventListener('DOMContentLoaded',
				function() {
					 new QWebChannel(qt.webChannelTransport, function (channel) {
						window.bridge = channel.objects.bridge;
					});

					// 获取弹窗
					var aboutModal = document.getElementById("about-modal");
					var updateModal = document.getElementById("update-modal");

					// 获取链接和关闭按钮
					var aboutLink = document.getElementById("about-link");
					var updateLink = document.getElementById("update-link");
					var closeAbout = document.getElementById("close-about");
					var closeUpdate = document.getElementById("close-update");

					// 当用户点击关于链接时，显示关于弹窗
					aboutLink.onclick = function() {
						aboutModal.style.display = "block";
					}

					// 当用户点击检查更新链接时，显示检查更新弹窗
					updateLink.onclick = function() {
						updateModal.style.display = "block";
					}

					// 当用户点击关闭按钮时，隐藏弹窗
					closeAbout.onclick = function() {
						aboutModal.style.display = "none";
					}

					closeUpdate.onclick = function() {
						updateModal.style.display = "none";
					}

					// 当用户点击弹窗外部时，隐藏弹窗
					window.onclick = function(event) {
						if (event.target == aboutModal) {
							aboutModal.style.display = "none";
						}
						if (event.target == updateModal) {
							updateModal.style.display = "none";
						}
					}
				});
		</script>
	</body>

</html>